// Created by lifei on 2020/7/17--18:01.
<!--hxf-0730-搜索组件封装修改-->
<template>
    <div class="v-search mb12">
        <div class="left-search" v-if="showSelectSearch">
            <div class="label">筛选：</div>
            <div class="search-items" v-if="showLeftSearch">
                <!--hxf-0730-左边框渲染，可以添加其他类型-->
                <div class="item" v-for="(item, index) in searchList.slice(0, 3)" :key="item.value">
                    <template v-if="index - 2 !== 0 ">
                        <el-input v-if="item.type==='input'" v-model="searchDataFrom[item.model]" :placeholder="'请输入'+item.label"></el-input>
                        <el-select v-if="item.type==='select'" v-model="searchDataFrom[item.model]" @change="selectChang($event, item.mole)" :placeholder="'请选择'+item.label">
                            <el-option
                                v-for="itemChildren in item.children "
                                :key="itemChildren.value"
                                :label="itemChildren.label"
                                :value="itemChildren.value">
                            </el-option>
                        </el-select>
                        <el-date-picker
                            v-if="item.type==='date'"
                            v-model="searchDataFrom[item.model]"
                            :ref="item.model"
                            type="date"
                            value-format="yyyy-MM-dd"
                            format="yyyy-MM-dd"
                            :placeholder="'请选择'+item.label"
                        ></el-date-picker>
                        <el-date-picker style="width: 250px"
                            v-if="item.type==='daterange'"
                            v-model="searchDataFrom[item.model]"
                            type="daterange"
                            value-format="yyyy-MM-dd"
                            format="yyyy-MM-dd"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期">
                        </el-date-picker>
                    </template>
                    <template v-else>
                        <span></span>
                    </template>
                </div>
            </div>
        </div>
        <div v-else></div>
        <div class="right-search flex-bc">
            <el-input v-model="input" prefix-icon="el-icon-search" :placeholder="placeholder"  maxlength="10"
                      clearable @keyup.enter.native="search()" @clear="$emit('clearSearchKeyword')"></el-input>
            <div class="search-label" v-if="showSelectSearch" @click="showSearch=!showSearch" :style="{'color' : (showSearch === true) ? '#409EFF' : '#000'}">
                <span>展开过滤</span>
                <span class="el-icon-arrow-down"></span>
            </div>
            <!--hxf-0730-右边框渲染，可以添加其他类型-->
            <div class="search-wrap" v-if="showSelectSearch" :class="{'show-search':showSearch}">
                <div class="item flex mb12" v-for="(item, index) in totalSearchData" :key="item.value">
                    <div class="left-item flex">
                        <div class="name">{{ item.label }}:</div>
                        <el-button size="mini" class="total" @click="everyClick(index, item.model)">不限</el-button>
                    </div>
                    <div class="right-item automatic" v-if="item.type==='select'">
                        <el-button class="data" v-for="sub in item.children" :key="sub.value" :class="{active: isActive[item.model + sub.value]}" @click="toggleSearch(sub, index, item.model)">
                            {{ sub.label }}
                        </el-button>
                    </div>
                    <div class="right-item flex" v-if="item.type==='date'">
                        <el-date-picker
                            v-model="searchDataFrom[item.model]"
                            type="date"
                            value-format="yyyy-MM-dd"
                            format="yyyy-MM-dd"
                            @change="toggleSearch($event, index, item.model)"
                            :placeholder="'请选择'+item.label"
                        ></el-date-picker>
                    </div>
                    <div class="right-item flex" v-if="item.type==='input'">
                        <el-input v-model="searchDataFrom[item.model]" @change="toggleSearch($event, index, item.model)" :placeholder="'请输入'+item.label"></el-input>
                    </div>
                    <div class="right-item flex" v-if="item.type==='daterange'">
                        <el-date-picker
                            v-model="searchDataFrom[item.model]"
                            type="daterange"
                            value-format="yyyy-MM-dd"
                            format="yyyy-MM-dd"
                            @change="toggleSearch($event, index, item.model)"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期">
                        </el-date-picker>
                    </div>
                </div>
                <div class="flex-bc">
                    <div></div>
                    <div>
                        <el-button type="default" size="small" @click="rightCleanClick">重置</el-button>
                        <el-button type="primary" size="small" @click="rightSearchClick">确认</el-button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'v-search',
    props: {
        //hxf-0903-如果展开过滤
        showSelectSearch: {
            type: Boolean,
            default: () => true
        },
        //hxf-0903-绑定搜索框提示值
        placeholder: {
            type: String,
            default: '请输入'
        },
        //hxf-0903-展开过滤配置筛选组
        totalSearchData: {
            type: Array,
            default: () => []
        },
        //hxf-0903-搜索选中存放
        searchDataFrom: {
            type: Object,
            default: () => {
                return {};
            }
        }
    },
    data() {
        return {
            //hxf-0903-搜索绑定值
            input: '',
            //hxf-0903-右边选中左边存放
            searchList: [],
            //hxf-0903-是否展开
            showSearch: false,
            checkboxGroup1: '',
            //hxf-0903-左边是否有选中项
            showLeftSearch: false,
            //hxf-0903-选中时变色的变量
            isActive: {}
        }
    },
    mounted() {
    },
    methods: {
        // hxf-0730-右边点击之后左边数组存值
        toggleSearch(sub, index, model) {
            // console.log(sub, index, model, model + sub.value)
            // hxf-0731-变色处理
            this.$set(this.isActive, model + sub.value, !this.isActive[model + sub.value])
            // hxf-0730-选择的大类信息
            let searchInfo = this.deepClone(this.totalSearchData[index]);
            // hxf-0730-检查大类是否存在
            let searchListIndex = this.searchList.findIndex(e => e.model === model)
            if (searchListIndex > -1) {
                if (searchInfo.type === 'select') {
                    let findIndex = this.searchList[searchListIndex].children.findIndex(item => item.value === sub.value);
                    if (findIndex > -1) {
                        this.searchList[searchListIndex].children.splice(findIndex, 1);
                        if (this.searchList[searchListIndex].children.length === 0) {
                            this.searchList.splice(searchListIndex, 1)
                        }
                        let searchDataFromIndex = this.searchDataFrom[model + 's'].findIndex(item => item.value === sub.value)
                        if (searchDataFromIndex > -1) {
                            this.searchDataFrom[model + 's'].splice(searchDataFromIndex, 1)
                        }
                    } else {
                        this.searchDataFrom[model + 's'].push(sub)
                        this.searchList[searchListIndex].children.push(sub)
                    }
                }
            } else {
                if (searchInfo.type === 'select') {
                    this.searchDataFrom[model] = ''
                    searchInfo.children = [sub];
                    this.searchDataFrom[model + 's'] = [sub]
                }
                /*if (searchInfo.type === 'daterange') {
                    this.searchDataFrom[model + 's'] = [sub]
                }*/
                this.searchList.push(searchInfo);
            }
        },
        // hxf-0730-将搜索事件传递给父级
        search() {
            this.$emit('searchByKey', this.input)
        },
        deepClone(obj) {
            return JSON.parse(JSON.stringify(obj))
        },
        // hxf-0730-重置
        rightCleanClick(){
            this.showSearch=false
            for(let key in this.searchDataFrom){
                this.searchDataFrom[key] = ''
            }
            this.searchList = []
            this.input = ''
            this.$emit('searchReset', 'Reset')
            this.isActive = []
        },
        // hxf-0730-确定
        rightSearchClick () {
            this.showLeftSearch = true
            this.showSearch = false
            for (let key in this.searchDataFrom) {
                if (this.searchDataFrom[key] instanceof  Array) {
                    let str = ''
                    this.searchDataFrom[key].map((item, index) => {
                        if (index < 2 ) {
                            str += str.length === 0 ? item.label : '、' + item.label;
                        } else {
                            str += '...'
                            return
                        }
                    })
                    this.$set(this.searchDataFrom, key.substring(0,key.length-1), str);
                }
            }
            this.search()
        },
        // hxf-0730-不限
        everyClick (index, model) {
            // hxf-0730-选择的大类信息
            let searchInfo = this.deepClone(this.totalSearchData[index]);
            // hxf-0730-检查大类是否存在
            let searchListIndex = this.searchList.findIndex(e => e.model === model)
            if(searchInfo.type === 'select'){
                let searchSelect = searchInfo.model
                for(let key in this.searchDataFrom){
                    this.searchDataFrom[searchSelect] = ''
                    this.$set(this.searchDataFrom, searchSelect + 's', [])
                    if (this.searchDataFrom[key] === '') {
                        this.$delete(this.$parent.$parent.searchForm,searchSelect)
                      /*  console.log('111',this.searchDataFrom)
                        console.log('222',this.$parent.$parent.searchForm)*/
                        // hxf-0731-变色处理
                        let isAction = []
                        searchInfo.children.map(item => {
                            this.$set(this.isActive, model + item.value, false)
                        })
                        this.searchList.splice(searchSelect,1)
                        this.input = ''
                    }
                }
                // this.$emit('searchReset', 'Reset')
               /* if (searchListIndex > -1) {
                    // hxf-0731-变色处理
                    searchInfo.children.map(item => {
                        this.$set(this.isActive, model + item.value, false)
                    })
                    this.searchList.splice(searchListIndex, 1)
                    this.$set(this.searchDataFrom, model + 's', [])
                } else {*/
                    /*this.$set(this.searchDataFrom, model + 's', [])
                    let _this = this
                    searchInfo.children.map(item => {
                        _this.searchDataFrom[model + 's'].push(item)
                    })
                    // this.searchList.push(searchInfo)
                    this.$set(this.searchList,searchInfo)*/
                    // hxf-0731-变色处理
                    /*let isAction = []
                    searchInfo.children.map(item => {
                        this.$set(this.isActive, model + item.value, true)
                    })*/
                // }
            } else if (searchInfo.type === 'date') {
            }
        },
        // hxf-0730-下拉框选中之后再次触发搜索
        selectChang (val, mole) {
            this.searchDataFrom[mole] = val
            this.$forceUpdate()
        }
    }
}
</script>

<style lang='scss'>


.v-search {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    .left-search {
        flex: 1;
        display: flex;

        .label {
            width: 50px;
            line-height: 44px;
        }

        .search-items {
            flex: 1;
            display: grid;
            grid-template-columns: 30% 30% 1fr;
            column-gap: 20px;

            .item {
                margin-bottom: 10px;
            }
        }
    }

    .right-search {
        position: relative;

        .search-label {
            width: 106px;
            margin-left: 12px;
            cursor: pointer;
            color: #333;
            :hover {
                color: $theme-color;
            }
            .el-icon-arrow-down {
                margin-left: 4px;
            }
        }

        .search-wrap {
            position: absolute;
            top: 40px;
            right: 0;
            z-index: 9;
            background-color: white;
            width: 660px;
            padding: 12px 20px;
            border: 1px solid $border-color;
            transform: scale(0);
            transition: all 0.3s ease;
            transform-origin: right top;

            .name {
                min-width: 60px;
            }

            .item {
                line-height: 36px;
                margin-bottom: 12px;
                align-items: flex-start;
                .total {
                    border: 1px solid $border-color;
                    padding: 0 12px;
                    margin: 0 20px 0 12px;
                    cursor: pointer;
                }
                .data {
                    border: 1px solid #fff;
                    margin-left: 0;
                }
                .active {
                    background-color: $theme-color;
                    color: #333;
                }
            }
        }

        .show-search {
            transform: scale(1);
            transition: all 0.3s ease;
        }
        .automatic {
            white-space: normal;
        }
    }

}
</style>
